import { Layout } from 'antd';
import React, { useState } from 'react';
import './index.less';
import { IRouteComponentProps } from 'umi';

import Menu from './components/Menu';
import Header from './components/Header';
import Nav from './components/Nav';

const { Content, Footer, Sider } = Layout;

const App = (props: IRouteComponentProps) => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="logo" />
        <Menu />
      </Sider>
      <Layout className="site-layout">
        {/* <Header className="site-layout-background" style={{ padding: 0 }} /> */}
        <Header />
        <Nav />

        <Content style={{ margin: '16px' }}>
          <div style={{ padding: 24, minHeight: 360 }}>{props.children}</div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

App.wrappers = ['@/wrappers/auth'];

export default App;
